<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1固定定位技巧1</title>
  <style>
    .main{
      margin-top: 130px;
    }
    .right,.left{
      width: 60px;
      height: 200px;
      position: fixed;/*固定定位的参照物是html*/
      top: 300px;

    }
    .left{
      background-color: yellow;
      left: 20px;
    }
    .right{
      background-color: yellow;
      right: 20px;
    }
    .top{
      background-color: aqua;
      height: 120px;
      font-size: 30px;
      color: green;
      position: fixed;
      width: 100%;
      top: 0;
      text-align: center;
      line-height: 120px;
    }

  </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左边广告条</div>
<div class="right">我是右边广告条</div>
<div class="main" >
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad, aspernatur at consectetur cumque
    delectus dicta eaque error, excepturi exercitationem illo ipsa placeat quod sit velit? Cumque molestias nisi
    officia?
  </div>
  <div>Dignissimos distinctio ex minima nostrum placeat praesentium ratione reiciendis repellendus sit. Adipisci
    architecto asperiores, assumenda culpa dolores esse explicabo illo laudantium minus natus optio possimus quod sint
    sit soluta tempora?
  </div>
  <div>Architecto atque beatae blanditiis consequuntur deserunt dicta dolores esse hic illum impedit ipsa iste libero
    molestiae nam necessitatibus nisi non officiis, provident quaerat, quas quia reiciendis, sint sit suscipit tenetur.
  </div>
  <div>Aliquam itaque iusto nam ullam? Adipisci aliquam asperiores, aspernatur at cum dolor doloribus earum, error
    excepturi illo in ipsum iste labore maxime minima minus nesciunt odit quis sit ullam? Ipsum.
  </div>
  <div>Adipisci, dolor eligendi laudantium minima minus molestias, necessitatibus nemo numquam, perspiciatis provident
    repellendus saepe sed unde. Dicta dolorum fuga neque nostrum nulla porro, possimus quae ratione reprehenderit,
    tempore temporibus voluptatibus.
  </div>
  <div>Adipisci culpa cumque dolor eius incidunt, maiores nesciunt odio perferendis perspiciatis suscipit tempora
    voluptate? A amet autem corporis cupiditate ea enim hic id iste minima quae quasi quibusdam veniam, voluptatem.
  </div>
  <div>Accusantium ad aliquid enim eos ex explicabo fuga fugit in, inventore iste magnam molestiae pariatur,
    perspiciatis quae quisquam repellendus sint soluta unde velit vitae voluptas voluptatem, voluptates? Enim harum,
    pariatur.
  </div>
  <div>Commodi inventore laudantium modi quam quidem reprehenderit vitae! Adipisci, amet animi assumenda facilis fugit
    id illo in itaque laudantium nemo nulla officiis quas reprehenderit similique tempora vel vero vitae voluptate.
  </div>
  <div>Aliquid animi atque aut deserunt dolore enim esse et fugiat impedit iusto laboriosam libero magnam minus modi
    omnis perspiciatis, porro possimus quaerat quas quos reiciendis repellat repudiandae sunt veniam, veritatis!
  </div>
  <div>Aliquam aliquid at blanditiis corporis dolorem, error facere illo in ipsa, ipsam labore magnam maiores nisi nobis
    numquam odio qui quo quod ratione repellat repudiandae sapiente sequi sunt tenetur veritatis.
  </div>
  <div>Adipisci aliquam aut blanditiis, deleniti deserunt dolor ea error iste iure maiores modi molestias natus,
    pariatur provident quisquam, quos sequi soluta vero. Eum excepturi facilis nam nisi non repudiandae, soluta?
  </div>
  <div>Amet delectus ea enim, error maiores quas ut. A accusantium amet, dolorem esse facilis impedit laboriosam libero
    magni modi nam nostrum nulla numquam obcaecati odit porro ratione soluta, sunt totam.
  </div>
  <div>Ad alias aliquid aspernatur blanditiis consequuntur culpa eum exercitationem illo in ipsa ipsam ipsum molestiae
    nesciunt numquam officiis perspiciatis provident qui quibusdam quo, repellat reprehenderit ullam veniam vero
    voluptas voluptatem.
  </div>
  <div>At dolores id magnam maiores nemo numquam quos ullam? Aliquam corporis deserunt ex laudantium libero magnam non
    obcaecati, quam sit ut veritatis voluptas voluptatem. Amet animi consectetur dignissimos distinctio saepe?
  </div>
  <div>Dolore dolorum enim, hic laborum odit quae tempore ullam. Commodi consequatur facilis id in inventore, molestiae
    voluptatibus. Dicta dolorum ducimus earum eius eos et harum, maxime, natus pariatur rem saepe.
  </div>
  <div>Dolores neque, reprehenderit! At consequuntur distinctio dolorem, doloremque eaque, fugit illo labore nam natus
    nemo, odit omnis possimus quia quisquam quod reiciendis repudiandae sed temporibus unde velit? Ducimus, fuga
    ratione!
  </div>
  <div>A accusamus consectetur cumque enim excepturi illo illum, laboriosam laudantium perferendis provident qui
    reiciendis sint temporibus tenetur veritatis voluptas voluptates. Aperiam aut consequatur consequuntur fugit illum
    laboriosam nesciunt. Nulla, quasi.
  </div>
  <div>Accusantium, architecto asperiores consectetur deserunt ducimus ea eaque et excepturi expedita incidunt ipsam
    itaque laudantium libero maxime modi molestiae numquam odit officia, perferendis possimus quo repellendus soluta
    veritatis voluptatibus voluptatum.
  </div>
  <div>A aliquam consequatur ducimus eligendi error, eveniet nisi omnis pariatur ut vel! Amet aperiam blanditiis culpa
    dolor eos est harum, hic omnis quae, quidem reiciendis rerum, saepe suscipit voluptas voluptatem.
  </div>
  <div>Accusamus aut cum error ex fugit ipsam laborum magni minima repellat sapiente! Architecto assumenda beatae
    expedita fuga harum hic iste, labore, molestiae necessitatibus provident quos reprehenderit sapiente sed sit unde.
  </div>
  <div>Ad alias aspernatur at debitis esse facilis hic, incidunt laboriosam nemo non nostrum officiis qui quis, quisquam
    quo repudiandae sed tempora totam ullam unde velit vero vitae! Ad, asperiores blanditiis!
  </div>
  <div>Deleniti fugiat, hic ipsum laborum nesciunt placeat provident voluptas? Beatae commodi cupiditate eaque
    exercitationem explicabo voluptatem! Aliquam cupiditate delectus magni quas quibusdam, repellat? Adipisci asperiores
    fugit nam perspiciatis sequi! Repudiandae.
  </div>
  <div>Adipisci alias aliquid doloribus eius facilis id in, quo ratione sed similique sint tempore temporibus unde. Ad
    aliquam amet asperiores commodi culpa delectus, est fuga in labore quis. Debitis, necessitatibus.
  </div>
  <div>A aliquid, aperiam asperiores assumenda blanditiis commodi consequuntur cumque cupiditate dolor ducimus
    exercitationem impedit inventore iure magni molestias nisi nobis non perspiciatis placeat possimus quasi saepe
    sapiente temporibus totam unde.
  </div>
  <div>Assumenda atque illo quia sit voluptatem. In nesciunt vero voluptates? Asperiores consequatur dolore dolorem
    magnam voluptatum! Atque cupiditate deserunt dolores exercitationem ipsam laudantium natus nisi odit, optio sequi
    unde veritatis?
  </div>
  <div>Aliquid at dolorem esse minima quia quo suscipit. Ex nulla quasi rem tempora vitae? Ab amet aut consectetur
    consequuntur, cum est explicabo id illo impedit iusto nam nesciunt soluta voluptatum!
  </div>
  <div>Enim explicabo illo itaque laboriosam maxime minus mollitia, non optio pariatur porro possimus quae quos
    repellendus reprehenderit rerum sint sit soluta suscipit tempore voluptate. Consectetur distinctio harum ipsum nam
    porro?
  </div>
  <div>Ab aliquid sunt veniam! Deserunt doloribus, dolorum eligendi et in iste iusto maxime nemo nesciunt nisi omnis
    placeat possimus provident quaerat saepe sequi sint sunt tempore ullam voluptate voluptates voluptatum?
  </div>
  <div>Ad consectetur cum cupiditate dolorum ea eaque enim eveniet expedita fuga fugit, hic ipsam labore laborum magni
    modi, nam neque nobis non quia quidem quod sunt, tenetur vel veniam vero.
  </div>
  <div>Aut commodi distinctio doloremque earum esse, harum iure iusto libero odio omnis praesentium reiciendis
    reprehenderit rerum soluta vitae. A aut culpa dolore eligendi exercitationem incidunt ratione reprehenderit
    repudiandae sunt vel?
  </div>
</div>
</body>
</html>